<template>
	<view>
		<!--自定义地址选择器-->
		<view class="cc_area_mask" v-show="show == true"></view>
		<view :class="'cc_area_view ' + (show ? 'show' : 'hide')">
			<view class="cc_area_view_btns">
				<text class="cc_area_view_btn_cancle" @tap="handleNYZAreaCancle">取消</text>
				<text class="cc_area_view_btn_title" style="color: #393939;font-size: 32upx;">地区选择</text>
				<text class="cc_area_view_btn_sure" @tap="handleNYZAreaSelect" :data-province="province"
					:data-city="city" :data-area="area" style="color: #4284e5;">确定</text>
			</view>
			<picker-view class="cc_area_pick_view" indicator-style="height: 35px;" @change="handleNYZAreaChange"
				:value="value">
				<picker-view-column>
					<view v-for="(item, index) in provinces" :key="index" class="cc_area_colum_view">{{ item }}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item, index) in citys" :key="index" class="cc_area_colum_view">{{ item }}</view>
				</picker-view-column>
				<picker-view-column>
					<view v-for="(item, index) in areas" :key="index" class="cc_area_colum_view">{{ item }}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
import {
	getProvinces,
	getMyCity,
	getAreas,
	getAreasCode
} from "./area.js"

let index = [0, 0, 0];
let provinces = getProvinces();
let citys = getMyCity(index[0]);
let areas = getMyCity(index[0], index[1]);

export default {
	mixins: [{
		methods: {
			setData: function (obj, callback) {
				let that = this;
				const handleData = (tepData, tepKey, afterKey) => {
					tepKey = tepKey.split('.');
					tepKey.forEach(item => {
						if (tepData[item] === null || tepData[item] === undefined) {
							let reg = /^[0-9]+$/;
							tepData[item] = reg.test(afterKey) ? [] : {};
							tepData = tepData[item];
						} else {
							tepData = tepData[item];
						}
					});
					return tepData;
				};
				const isFn = function (value) {
					return typeof value == 'function' || false;
				};
				Object.keys(obj).forEach(function (key) {
					let val = obj[key];
					key = key.replace(/\]/g, '').replace(/\[/g, '.');
					let front, after;
					let index_after = key.lastIndexOf('.');
					if (index_after != -1) {
						after = key.slice(index_after + 1);
						front = handleData(that, key.slice(0, index_after), after);
					} else {
						after = key;
						front = that;
					}
					if (front.$data && front.$data[after] === undefined) {
						Object.defineProperty(front, after, {
							get() {
								return front.$data[after];
							},
							set(newValue) {
								front.$data[after] = newValue;
								that.$forceUpdate();
							},
							enumerable: true,
							configurable: true
						});

						// #ifndef VUE3
						that.$set(front, after, val);
						// #endif

						// #ifdef VUE3
						Reflect.set(front, after, val);
						// #endif

					} else {

						// #ifndef VUE3
						that.$set(front, after, val);
						// #endif

						// #ifdef VUE3
						Reflect.set(front, after, val);
						// #endif
					}
				});
				isFn(callback) && this.$nextTick(callback);
			}
		}
	}],
	data() {
		return {
			provinces: getProvinces(),
			citys: getMyCity(index[0]),
			areas: getAreas(index[0], index[1]),
			value: [0, 0, 0]
		};
	},

	components: {},
	props: {
		// 省
		province: {
			//控制area_select显示隐藏
			type: String,
			default: ''
		},
		// 市
		city: {
			//控制area_select显示隐藏
			type: String,
			default: ''
		},
		// 区
		area: {
			//控制area_select显示隐藏
			type: String,
			default: ''
		},

		show: {
			//控制area_select显示隐藏
			type: Boolean,
			default: false
		},
		maskShow: {
			//是否显示蒙层
			type: Boolean,
			default: true
		}
	},
	watch: {
		province() {
			this.init();
		},
		city() {
			this.init();
		},
		area() {
			this.init();
		}
	},
	mounted() {
		let provinceIndex = this.provinces.indexOf(this.province);
		this.citys = getMyCity(provinceIndex);
		let cityIndex = this.citys.indexOf(this.city);
		this.areas = getAreas(provinceIndex, cityIndex);
		let areaIndex = this.areas.indexOf(this.area);

		// 设置选择序列
		this.value = [provinceIndex, cityIndex, areaIndex];
		let areaCode = getAreasCode(provinceIndex, cityIndex, areaIndex);
		//console.log(areaCode)
		//console.log("this.value = " + JSON.stringify(this.value));
	},
	methods: {
		init() {
			//console.log(this.area)
			let provinceIndex = this.provinces.indexOf(this.province);
			this.citys = getMyCity(provinceIndex);
			let cityIndex = this.citys.indexOf(this.city);
			this.areas = getAreas(provinceIndex, cityIndex);
			let areaIndex = this.areas.indexOf(this.area);

			//获取地区编码
			let areaCode = getAreasCode(provinceIndex, cityIndex, areaIndex);
			// 设置选择序列
			this.value = [provinceIndex, cityIndex, areaIndex];

		},
		handleNYZAreaChange: function (e) {
			var that = this;
			var value = e.detail.value;

			// 更新 index
			index = value;

			// 获取对应的城市和区域数据
			let selectCitys = getMyCity(index[0]);
			let selectAreas = getAreas(index[0], index[1]);

			// 触发 setData 更新数据
			that.setData({
				citys: selectCitys,
				areas: selectAreas,
				value: index
			});

			let areaCode = getAreasCode(index[0], index[1], index[2]);

			// 触发事件
			that.$emit("changeClick", provinces[index[0]], selectCitys[index[1]], selectAreas[index[2]], areaCode);


		},

		/**
		 * 确定按钮的点击事件
		 */
		handleNYZAreaSelect: function (e) {
			var myEventDetail = e;
			var myEventOption = {};
			this.$emit('sureSelectArea', {
				detail: myEventDetail
			}, myEventOption);

			// 复原初始状态
			index = [0, 0, 0];
		},

		handleNYZAreaCancle: function (e) {
			var that = this;

			this.$emit('hideShow', {
				detail: false
			});

			// 复原初始状态
			index = [0, 0, 0];
		}


	},






	/**
	 * 取消按钮的点击事件
	 */
	handleNYZAreaCancle: function (e) {
		var that = this;
		//console.log("e:" + JSON.stringify(e));
		this.$emit('hideShow', {
			detail: false
		});
		// 复原初始状态
		index = [0, 0, 0];
	}
}
</script>
<style scoped lang="scss">
.cc_area_view {
	width: 100%;
	position: fixed;
	bottom: -1000px;
	left: 0px;
	background-color: #fff;
	z-index: 21;
	transition: all 0.3s;
}

.cc_area_pick_view {
	height: 400px;
	width: 100%;

}

.cc_area_colum_view {
	line-height: 35px;
	text-align: center;
	font-size: 28upx;
}

.hide {
	bottom: -1000upx;
	transition: all 0.3s;
}

.show {
	bottom: 0upx;
	transition: all 0.3s;
}

.cc_area_view_btns {
	background-color: #fff;
	border-bottom: 1px solid #eeeeee;
	font-size: 30upx;
	padding: 18upx 0upx;
	display: flex;
	justify-content: space-between;
}

.cc_area_view_btns>text {
	display: inline-block;
	word-spacing: 4upx;
	letter-spacing: 4upx;
}

.cc_area_view_btn_cancle {
	color: #939393;
	padding-right: 20upx;
	padding-left: 25upx;
}

.cc_area_view_btn_sure {
	float: right;
	padding-left: 20upx;
	padding-right: 25upx;
}

.cc_area_mask {
	width: 100%;
	height: 100vh;
	background-color: rgba(28, 28, 28, 0.6);
	position: absolute;
	top: 0upx;
	left: 0upx;
	z-index: 20;
}
</style>